<template>
	<view class="hotel_serve">
		<!-- #ifdef H5 -->
		<Header @back="back()" left-icon="back" left-text="" right-text="" title="详情设施"></Header>
		<!-- #endif -->
		<view class="hotel_content">
			<view class="title">
				<text>设施与服务</text>
			</view>
			<view class="content">
				<view class="hotel_tab">
					<view class="installation">
						<text>公共设施</text>
					</view>
					<view class="room-facility">
						<!-- <text>1111</text> -->
						<block v-for="(item,index) in publicServices" :key="index">
							<view>
								<rich-text :nodes = "item"></rich-text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="hotel_tab">
					<view class="installation">
						<text>客房设施</text>
					</view>
					<view class="hotel-facility">
						<block v-for="(item,index) in roomServices" :key="index">
							<view>
								<rich-text :node="item"></rich-text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="hotel_tab Under_line">
					<view class="installation">
						<text>酒店服务</text>
					</view>
					<view class="hotel-facility">
						<block v-for="(item,index) in hotelServices" :key="index">
							<view>
								<rich-text :node="item"></rich-text>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view class="space"></view>
		<view class="notice">
			<view class="title">
				<text>预定须知</text>
			</view>
			<view class="installation">
				<view>
					<text class="time">入离时间</text>
				</view>
				<view class="leaving_time">
					<text>入住时间:{{dateTime[0]}}以后</text>
					<text>离店时间:{{dateTime[1]}}以前</text>
				</view>
			</view>
		</view>
		<view class="telephone">
			<view class="title">
				<text>联系电话</text>
				<text>{{phone}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from '../../../components/header.vue';
	export default {
		data() {
			return {
				hotelServices:[],
				publicServices:[],
				roomServices:[],
				data:{},
				phone:'',
				dateTime:[]
			};
		},
		components: {
			Header,
		},
		methods:{
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
		onLoad: function(option) {
			var that = this;
			uni.getStorage({
				key: 'datas',
				success: function (res) {
					// var temp = res.data.hotelServices.toString().substring(0, res.data.hotelServices.toString().length-1);
					// res.data.hotelServices = 
					
					// if(res.data.hotelServices.toString().substring(res.data.hotelServices.toString().length-1) == ',')
					// res.data.hotelServices.forEach(item=>{
					// 	
					// })
					/*入离服务*/
					if(res.data.dateCaption){
						that.dateTime = res.data.dateCaption.split(",")
					}else{
						that.dateTime = ['12:00','14:00']
					}
					/*联系电话*/
					if(res.data.tel){
						that.phone = res.data.tel
					}
					
					//设施与服务
					if(res.data.hotelService){
						that.hotelServices = that.pub.changeFontColor(res.data.hotelService.split(","));
						that.hotelServices.splice(that.hotelServices.length - 1,1);
					}else{
						that.hotelServices = ['24小时前台','电梯']
					}
					if(res.data.publicService){
						that.publicServices = that.pub.changeFontColor(res.data.publicService.split(","));
						that.publicServices.splice(that.hotelServices.length - 1,1);
					}else{
						that.publicServices = ['免费WIFI','拖鞋']
						
					}
					if(res.data.roomService){
						that.roomServices = that.pub.changeFontColor(res.data.roomService.split(","));
						that.roomServices.splice(that.hotelServices.length - 1,1);
					}else{
						that.roomServices = ['行李寄存','旅游咨询服务']
					}
					
				},
			});
		}
	}
</script>

<style lang="scss">
	.hotel_serve{
		background: #f5f5f5;
		// min-height: 100%;
	}
	.hotel_content{
		.installation{
			display: flex;
			justify-content:space-between;
			color: #808080;
		}
		padding: 10upx;
		background: #fff;
		/* #ifdef H5 */
		padding-top:100upx;
		/* #endif */
		.title{
			margin: 35upx 0 20upx 30upx;
			font-family: PingFang-SC-Bold;
			color: #333333;
			font-weight: bold;
			font-size: 32upx;
			// font-weight: normal;
			// font-stretch: normal;
			// letter-spacing: 0px;
		}
		.content{
			display: flex;
			flex-direction: column;
			line-height: 64upx;
			color: black;
			// justify-content: center;
			// align-items: center;
			// text-align: center
			justify-content: space-around;
			.hotel_tab{
				margin: 0 32upx 32upx 32upx;
				padding-bottom: 30upx;
			}
		}
		.hotel_tab{
			background: #fff;
			font-size: 28upx;
			display: flex;
			border-bottom: 1upx solid #e6e6e6;
			display: flex;
			flex-direction: column;
			.room-facility,.hotel-facility{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
				// width: 100%
				text{
					color: #4d4d4d;
				}
				
				view {
					// text-align: center;
					width: 33%;
					font-size: 28upx;
				}
				
			}
		}
		.Under_line{
			border-bottom: none;
		}
	}
	.notice{
		background: #fff;
		.installation{
			font-size: 28upx;
			padding: 0 34upx 32upx 34upx;
			display: flex;
			justify-content:space-between;
			.time{
				color: #808080;
			}
			.leaving_time{
				text{
					margin-right: 10upx;
					color: #4d4d4d;
				}
			}
		}
		
		margin-top: 20upx;
		display: flex;
		flex-direction: column;
		line-height: 64upx;
		color: black;
		// justify-content: center;
		// align-items: center;
		// text-align: center
		justify-content: space-around;
		
		.title{
			font-family: PingFang-SC-Bold;
			color: #333333;
			font-weight: bold;
			font-size: 32upx;
			// font-weight: normal;
			// font-stretch: normal;
			// letter-spacing: 0px;
			padding: 36upx 36upx 20upx 36upx;
			font-size: 32upx;
		}
	}
	.telephone{
		margin-top: 20upx;
		background: #fff;
		.title{
			padding:36upx;
			// margin: 36upx 0 0 0;
			font-weight: bold;
			font-size: 32upx;
			color: #333333;
			text{
				margin-right: 50upx;
			}
		}
	}
</style>
